<template>
  <div>
    <Buildings :buildings="buildings.filter(i => !i.publicareatype)" @ok="onSelectBuilding" />
    <el-dialog title="外立面" :visible.sync="showDialog" width="350px" append-to-body>
      <el-radio-group v-model="selected">
        <el-row>
          <el-col :span="12" v-for="name in directionList" :key="name" style="margin-bottom: 30px; text-align: center">
            <el-radio :label="name" border />
          </el-col>
        </el-row>
      </el-radio-group>
      <div slot="footer">
        <el-button type="primary" @click="onSubmit">确 定</el-button>
        <el-button @click="showDialog = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
// 选择外立面
import Buildings from './Buildings'
export default {
  name: 'Direction',
  components: { Buildings },
  props: { buildings: { type: Array, default: () => [] } },
  data() {
    return {
      showDialog: false,
      building: {},
      directionList: ['东面', '西面', '南面', '北面'],
      selected: ''
    }
  },
  methods: {
    onSelectBuilding(data) {
      this.building = data.building
      this.showDialog = true
    },
    onSubmit() {
      const { building, selected } = this
      if (!selected) return this.$message.info('请选择外立面')

      const position = {
        buildingId: building.fid,
        shortName: `${building.fnameL2}-${selected}`,
        direction: selected
      }
      this.$emit('ok', { position, building, submitNow: true })
      this.showDialog = false
    }
  }
}
</script>
